<template>
  <el-drawer v-if="!isMobile" v-model="dialogVisible" title="道路概况" direction="ltr" @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">现场直播</div>
      </div>
    </template>
    <div class="content content1">
      <div class="item" v-for="item in list" :key="item.id" @click="play(item)">
        <img class="img"
          src="https://img1.baidu.com/it/u=2741009612,1663063733&fm=253&fmt=auto&app=138&f=JPEG?w=864&h=486" alt="" />
        <div class="top">
          <div class="name-type">直播中</div>
          <!-- <div class="name-text">高速监控员</div> -->
        </div>

        <div class="center">
          <img class="img" src="@/assets/imgs/播放.png" alt="" />
        </div>

        <div class="bottom">
          <div class="name">{{ title }}实况直播</div>
          <div class="number">
            <!-- <div>观看人数：1802</div> -->
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
  <el-dialog v-else class="dialog" v-model="dialogVisible" title="现场画面" :top="isMobile ? '10vh' : '25vh'"
    :width="isMobile ? '90%' : '30%'" @close="close">
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">现场直播</div>
      </div>
    </template>
    <div class="content">
      <div class="item" v-for="item in list" :key="item.id" @click="play(item)">
        <img class="img"
          src="https://img1.baidu.com/it/u=2741009612,1663063733&fm=253&fmt=auto&app=138&f=JPEG?w=864&h=486" alt="" />
        <div class="top">
          <div class="name-type">直播中</div>
          <!-- <div class="name-text">高速监控员</div> -->
        </div>

        <div class="center">
          <img class="img" src="@/assets/imgs/播放.png" alt="" />
        </div>

        <div class="bottom">
          <div class="name">{{ title }}实况直播</div>
          <div class="number">
            <!-- <div>观看人数：1802</div> -->
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getVideoByLqmsApi } from "@/apis/videoControlDialog.js";
const route = useRoute()
const dialogVisible = ref(false)
const title = ref('金沙江')
const isMobile = inject('isMobile')
const list = ref([])

const play = (item) => {
  let src = window.location.origin + item.src
  if (route.query.name === "龙泉山") {
    src = item.src
  }
  if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
    uni.navigateTo({
      url: '/pages/video/index?src=' + src + '&title=环城高速实况直播',
    })
  } else {
    window.open(src, '_blank')
  }
}
const getVideo = async () => {
  try {
    const res = await getVideoByLqmsApi()
    console.log("res", res.data);
    if (res.data.code !== 200) {
      throw new Error(res.data.msg);
    }
    const { deviceid, hashid } = res.data.rows.filter(item => item.conversionStatus === "success")[0];
    list.value = [
      {
        id: hashid,
        name: deviceid,
        src: "https://www.mountagent.com/video/" + hashid,
      }
    ]
  } catch (error) {
    ElMessage.error(error?.message || "数据获取失败");
  }
}
const open = () => {
  dialogVisible.value = true
  title.value = route.query.name || '城市'
  if (route.query.name === "龙泉山") {
    getVideo()
  } else {
    list.value = [
      {
        id: 1,
        name: '1',
        src: '/prefix/然乌镇视频/1.mp4',
      },
      {
        id: 2,
        name: '2',
        src: '/prefix/然乌镇视频/2.mp4',
      },
      {
        id: 3,
        name: '3',
        src: '/prefix/然乌镇视频/3.mp4',
      },
      {
        id: 4,
        name: '4',
        src: '/prefix/然乌镇视频/4.mp4',
      },
      {
        id: 5,
        name: '5',
        src: '/prefix/然乌镇视频/5.mp4',
      },
      {
        id: 6,
        name: '6',
        src: '/prefix/然乌镇视频/6.mp4',
      },
      {
        id: '7',
        name: '7',
        src: '/prefix/然乌镇视频/7.mp4',
      },
      {
        id: '8',
        name: '8',
        src: '/prefix/然乌镇视频/8.mp4',
      },
    ]
  }

}
const close = () => {
  dialogVisible.value = false
}
defineExpose({ open, close })
</script>

<style scoped lang="scss">
.content1 {
  height: 100% !important;
  gap: 20px !important;
}

.content {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .item {
    width: 100%;
    height: 150px;
    position: relative;

    .img {
      border-radius: 10px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .top {
      position: absolute;
      top: 10px;
      left: 10px;
      display: flex;
      align-items: center;
      gap: 5px;

      .name-type {
        border-radius: 10px;
        padding: 2px 10px;
        text-align: center;
        font-size: 10px;
        color: #fff;
        background-color: red;
      }

      .name-text {
        padding: 2px 10px;
        text-align: center;
        border-radius: 10px;
        font-size: 12px;
        color: #fff;
        background-color: #2d363bce;
      }
    }

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .img {
        width: 50px;
        height: 50px;
      }
    }

    .bottom {
      position: absolute;
      bottom: 10px;
      left: 10px;

      .name {
        font-size: 12px;
        color: #fff;
        font-weight: bold;
      }

      .number {
        font-size: 10px;
        color: #fff;
        margin-top: 5px;
      }
    }
  }
}
</style>
